<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />


</head>
<body>


	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/dhtmlxgrid.css">
	<!-- 标题栏会显示图片，这样更美观 -->
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/dhtmlxgrid_dhx_skyblue.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/dhtmlxgrid_dhx_black.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/status_toolbar_accordion.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/status_toolbar_layout.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/status_toolbar_window.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/dhtmlxtoolbar_dhx_skyblue.css">
	<!-- 
	<script src="dhtmlxgrid/dhtmlxcommon.js"></script>
	<script src="dhtmlxgrid/dhtmlxgrid.js"></script>
	<script src="dhtmlxgrid/dhtmlxgridcell.js"></script>
	<script src="dhtmlxgrid/dhtmlxgrid_pgn.js"></script>
	 -->
	<script src="dhtmlxgrid/dhtmlx.js"></script>
	
	<!-- 如果需要给某列数据添加链接，则需要引入这个js -->
	<script src="dhtmlxgrid/dhtmlxgrid_excell_link.js"></script>

		
	 <div id="recinfoArea"><!--页数信息--></div> 
	<div id="gridbox" style="width:503px;height:120px;background-color:white;"></div>
	
	<div id="pagingArea"><!--页数区域 --></div>  
	

		<script>
		
		mygrid = new dhtmlXGridObject('gridbox');
		mygrid.setImagePath("dhtmlxgrid/imgs/");
		//标题显示内容
		mygrid.setHeader("多选,单选,Name,Date of Birth, First Book Published");
		//指明列的宽度，*表示是余下的宽度显示
		mygrid.setInitWidths("*,50,50,50,50");
		//表示内容排序位置，分别是左、中、中
		mygrid.setColAlign("left,center,center,center,center");
		
		/*
			ch ---- checkbox
			ra ---- radio
			ro ---- readonly
			txt ---- 显示的是字符串
		*/
		mygrid.setColTypes("ch,ra,ro,link,txt");
		//mygrid.setColTypes("ed,dhxCalendar,dhxCalendarA");
		
		//按照什么方式排序int,str,date 三个类型
		mygrid.setColSorting("str,str,str,str,date");
		
		//指明使用什么皮肤（天蓝色）,这个和前面引用是CSS对应起来
		mygrid.setSkin("dhx_skyblue");
		//mygrid.setSkin("dhx_black");
		
		//初始化数据
		mygrid.init();
		//mygrid.loadXML("../common/grid_dates.xml");
		
		//备注：数据列一定要和标题栏对应起来，否则会显示前面的数据
		//上面每个配置项都需要一一对应，否则会出现意想不到的错误，很难发现，即对每一列样式的设置
		 var js={
				    rows:[
				        { id:1001,
				     data:[
				           "0",//0表示checkbox没有被选中
				           "ra1",//非0表示radio被选中
				          "100",
				          //^后面显示的是链接地址，一定要指明这列数据类型是link
				          "A Time to Kill^http://www.baidu.com",
				          "05/01/1998"] },
				       { id:1002,
				     data:[
				           "1",//非0表示checkbox被选中
				           "0",//非0表示radio被选中
				          "1000",
				          "Blood and Smoke",
				          "01/01/2000"] }
				    ]}
		 
		 //指明导入数据的回调函数
		 mygrid.parse(js,function(){
			 //alert(1);
		 },"json");
		
		 //允许分页 
		 /*
		grid.enablePaging(mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer);
		 
		mode(true|false) - enable|disable paging mode;
		pageSize - set count of rows per page;
		pagesInGrp - set count of visible page selectors;
		pagingControlsContainer - id or container that will be used for showing paging controls;
		showRecInfo(true|false) - enable|disable showing of additional information about paging state;
		pagingStateContainer - id or container that will be used for showing paging state.
		 */
		 
		 mygrid.enablePaging(true, 1, 5, "pagingArea", true, "recinfoArea"); 
		 //mygrid.enablePaging(true, 10, 3, "pagingArea");
		 mygrid.setPagingSkin("toolbar", "dhx_skyblue");
		// mygrid.setPagingSkin("bricks");
		
		mygrid.addRow(123,"0,0,555,huangbiao,1988/11/30",0);//放在第一行
		

	</script>
</body>
</html>